<template>
	<div class="article-ranking-container">
		<el-card class="header">
			<div class="dynamic-box">
				<span class="title">{{ $t('msg.article.dynamicTitle') }}</span>

				<el-checkbox-group v-model="selectDynamicLabel">
					<el-checkbox v-for="(item, index) in dynamicData" :label="item.label" :key="index">{{ item.label }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
		</el-card>

		<el-card>
			<el-table border style="width: 100%" ref="tableRef" :data="tableData">
				<el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in tableColumns"
					:key="index">

					<template v-if="item.prop === 'publicDate'" #default="{row}">
						{{$filters.relativeTime(row.publicDate)}}
					</template>

					<template v-if="item.prop === 'action'" #default="{row}">
						<el-button type="primary" size="default" @click="onShowClick(row)">{{ $t('msg.article.show') }}
						</el-button>
						<el-button type="danger" size="default" @click="onRemoveClick(row)">
							{{ $t('msg.article.remove') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<el-pagination background class="pagination" @size-change="handleSizeChange"
				@current-change="handleCurrentChange" :current-page="page" :page-sizes="[5, 10, 50, 100, 200]"
				:page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup>
	import {
		ref,
		onActivated,
		onMounted
	} from 'vue'
	import {
		getArticleList,
		deleteArticle
	} from '@/api/article'
	import {
		watchSwitchLang
	} from '@/utils/i18n'
	import {
		dynamicData,
		selectDynamicLabel,
		tableColumns
	} from './dynamic'
	import {
		tableRef,
		initSortable
	} from './sortable'
	import {
		ElMessageBox,
		ElMessage
	} from 'element-plus'
	import {
		useI18n
	} from 'vue-i18n'
	import {
		useRouter
	} from 'vue-router'

	const tableData = ref([])
	const page = ref(1)
	const size = ref(10)
	const total = ref(0)

	const getListData = async () => {
		const result = await getArticleList({
			page: page.value,
			size: size.value
		})

		tableData.value = result.list
		total.value = result.total
	}

	getListData()
	watchSwitchLang(getListData)
	onActivated(getListData)

	// 初始化sortable
	onMounted(() => {
		initSortable(tableData, getListData)
	})

	const router = useRouter()
	
	const onShowClick = row => {
		router.push(`/article/${row._id}`)
	}

	const i18n = useI18n()

	const onRemoveClick = row => {
		ElMessageBox.confirm(
			i18n.t('msg.article.dialogTitle1') +
			row.title +
			i18n.t('msg.article.dialogTitle2'), {
				type: 'warning'
			}
		).then(async () => {
			await deleteArticle(row._id)
			ElMessage.success(i18n.t('msg.article.removeSuccess'))
			// 重新渲染数据
			getListData()
		})
	}

	const handleSizeChange = currentSize => {
		size.value = currentSize
		getListData()
	}

	const handleCurrentChange = currentPage => {
		page.value = currentPage
		getListData()
	}
</script>

<style lang="scss" scoped>
	.article-ranking-container {
		.header {
			margin-bottom: 20px;

			.dynamic-box {
				display: flex;
				align-items: center;

				.title {
					margin-right: 20px;
					font-size: 14px;
					font-weight: bold;
				}
			}
		}

		:deep .el-table__row {
			cursor: pointer;
		}

		.pagination {
			margin-top: 20px;
			text-align: center;
		}
	}

	:deep .sortable-ghost {
		opacity: 0.6;
		color: #fff !important;
		background: #304156 !important;
	}
</style>
